<template>
  <div id="lineCharts" ref="lineCharts"></div>
</template>

<script>
import resize from '@/components/mixins/resize'

export default {
  title: '实时动态折线图',
  name: 'StackedLine',
  mixins: [resize],
  props: {
    datas: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      chart: null,
    }
  },
  watch: {
    datas(val) {
      this.setOptions(val)
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  methods: {
    initChart() {
      this.chart = this.$echarts.init(this.$refs.lineCharts)
      this.setOptions(this.datas)
    },
    setOptions(datas = []) {
      if (!this.chart) {
        return false
      }
      this.chart.setOption({
        colors: ['#0694ce', '#07ceac', '#FCFF00', '#E68E1C'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {type: 'cross'},
          padding: [5, 10],
          textStyle: {
            fontSize: 14
          }
        },
        legend: {
          show: true,
          textStyle: {
            color: '#fff'
          }
        },
        grid: {
          left: 10,
          right: 30,
          bottom: 5,
          top: 50,
          containLabel: true
        },
        xAxis: {
          type: 'time',
          data: datas.map(item => {
            return item.date
          }),
          boundaryGap: false,
          axisTick: {show: false},
          axisLabel: {color: '#fff', fontSize: 15, showMaxLabel: true},
          axisLine: {lineStyle: {color: '#0694ce'}},
          splitLine: {show: true, lineStyle: {color: '#0694ce'}},
          splitNumber: 5
        },
        yAxis: [
          {
            type: 'value',
            name: '',
            nameTextStyle: {color: '#fff', fontSize: 15},
            axisTick: {show: false},
            splitArea: {show: false},
            axisLabel: {color: '#fff', fontSize: 14, showMaxLabel: true},
            axisLine: {lineStyle: {color: '#0694ce'}},
            splitLine: {show: true, lineStyle: {color: '#0694ce'}},
            min: 0,
            splitNumber: 5
          },
          {
            type: 'value',
            name: '经纬度',
            nameTextStyle: {color: '#fff', fontSize: 15},
            axisTick: {show: false},
            splitArea: {show: false},
            axisLabel: {color: '#fff', fontSize: 14, showMaxLabel: true},
            axisLine: {lineStyle: {color: '#0694ce'}},
            splitLine: {show: true, lineStyle: {color: '#0694ce'}},
            min: 0,
            splitNumber: 5
          }
        ],
        series: [
          {
            name: '飞行速度',
            yAxisIndex: 0,
            smooth: true,
            showSymbol: false, // 在 tooltip hover 的时候显示。
            type: 'line',
            itemStyle: {normal: {color: '#0694ce', lineStyle: {color: '#0694ce', width: 2}}},
            data: datas.map(item => {
              return [item.date, item.airspeed]
            })
          },
          {
            name: '飞行高度',
            yAxisIndex: 0,
            smooth: true,
            showSymbol: false, // 在 tooltip hover 的时候显示。
            type: 'line',
            itemStyle: {normal: {color: '#07ceac', lineStyle: {color: '#07ceac', width: 2}}},
            data: datas.map(item => {
              return [item.date, item.height]
            })
          },
          {
            name: '经度',
            yAxisIndex: 1,
            smooth: true,
            showSymbol: false, // 在 tooltip hover 的时候显示。
            type: 'line',
            itemStyle: {normal: {color: '#FCFF00', lineStyle: {color: '#FCFF00', width: 2}}},
            data: datas.map(item => {
              return [item.date, item.longitude]
            })
          },
          {
            name: '纬度',
            yAxisIndex: 1,
            smooth: true,
            showSymbol: false, // 在 tooltip hover 的时候显示。
            type: 'line',
            itemStyle: {normal: {color: '#E68E1C', lineStyle: {color: '#E68E1C', width: 2}}},
            data: datas.map(item => {
              return [item.date, item.latitude]
            })
          },
        ]
      });
    }
  }
};
</script>

<style lang="less" scoped>
  #lineCharts {
    width: 100%;
    height: 100%;
  }
</style>